/**
 * Created by rongyao on 2017/11/15.
 */
import React from 'react'
import {Link} from 'react-router'
import {Provider, connect} from 'react-redux'
import {fetchComment,AddComment,addCar} from '../../actions/counter'
import {Carousel} from 'react-bootstrap'
import "./productDetail.scss"
class ProductDetail extends React.Component{
	componentDidMount(){
		var id = JSON.parse(localStorage.detail)._id;
		console.log(id);
		this.props.fetchComment(id)
	}
	commentHandle(){
		var data = {};
		data.comment = $("#comInp").val();
		data.cateId = JSON.parse(localStorage.detail)._id;
		data.commentator = "huang";
		this.props.AddComment(data)
	}
	addShopCar(){
		var goods = this.props.shopCar;
		goods.push(JSON.parse(localStorage.detail));
		console.log(goods);
		this.props.addCar(goods);
	}
	
	render(){
		var {productList,commentList,fetchComment} = this.props;
		var index = this.props.params.index-0;
		// console.log(commentList);
		var commentCount = 0;
		if(commentList.rows&&commentList.rows.length>0){
			commentCount  = commentList.rows.length;
			var commentf = commentList.rows.map(function (val, idx) {
				return (
					<li className="listComment" key={idx}>{val.comment}</li>
				)
			})
		}
		if(productList.rows&&productList.rows.length>0){
			localStorage.detail = JSON.stringify(productList.rows[index])
		}
		// console.log(newsList);
		var carou = [];
		var pic = JSON.parse(localStorage.detail).pic
		for (var i = 0; i < pic.length; i++) {
			var imgUrl="http://localhost:3000/"+pic[i].filename;
			carou.push(
				<Carousel.Item>
					<img style={{width: '100%', height: '500px'}} alt="900x500" src={imgUrl}/>
				</Carousel.Item>
			)
		}
		console.log(imgUrl);
		return(
			<div className="container">
				<img src="./src/img/tou.bmp" alt=""/>
				<div className="row" style={{margin:'20px'}}>
					<div className="col-md-5" style={{paddingTop:'50px'}}>
						<Carousel>
							{carou}
						</Carousel>
					</div>
					<div className="col-md-7 productcont">
						<div className="row">
							<h3 className="col-md-8 font">
								{JSON.parse(localStorage.detail).name}
							</h3>
							<div className="col-md-4">
								<img src="./src/img/xinlang.bmp" alt=""/>
							</div>
						</div>
						<div className=" row">
							<h3 className="col-md-7 price">
								￥{JSON.parse(localStorage.detail).price}
							</h3>
						</div>
						<img src="./src/img/ww.bmp" alt=""/>
						<div>
							<img className="smallPic" src={`http://localhost:3000/${pic[0].filename}`} alt=""/>
						</div>
						<div>
							<img src='./src/img/www.bmp' alt=""/>
						</div>
						<div className="productDetail">
							{JSON.parse(localStorage.detail).describe}
						</div>
						<div>
						<div className="butto">
							<button type="button" className="btn btn-danger" style={{marginRight:'40px'}} onClick={this.addShopCar.bind(this)}>加入购物车</button>
							<button type="button" className="btn btn-success">提交订单</button>
						</div>
						</div>
					</div>
				</div>
				
				
				<div className="comment row">
					<div className="input-group">
						<input id="comInp" type="text" className="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"/>
						<span className="input-group-addon" id="basic-addon2" onClick={this.commentHandle.bind(this)}>评论</span>
					</div>
					<div>
						<div className="row">
							<h4 className="col-md-11" style={{marginTop:'50px'}}>查看评论</h4>
							<p  className="col-md-1" style={{marginTop:'50px'}}>评论数:{commentCount}</p>
						</div>
						<hr/>
						<ul>
							{commentf}
						</ul>
					</div>
				
				</div>
			</div>
		)
	}
}

const getValue = (state) => {
	return {
		newsList: state.newsList,
		cateList: state.cateList,
		commentList: state.commentList,
		productList: state.productList,
		shopCar: state.shopCar
	}
}
const ProductDetailContext = connect(
	getValue,
	{fetchComment,AddComment,addCar}
)(ProductDetail)
module.exports=ProductDetailContext;
